<template>
  <el-table 
    ref="multipleTableRef" 
    :data="tableData" 
    @selection-change="handleSelectionChange" 
    stripe 
    align="left"
    :default-sort="{ prop: 'user', order: 'descending' }" 
    style="width: 100%">

    <el-table-column type="selection" width="55" />
    <el-table-column prop="user" label="姓名" sortable width="180" />
    <el-table-column prop="audio" label="音频" width="400">
      <template #default="scope">
        <audio controls>
          <source :src="scope.row.audio" type="audio/mpeg">
        </audio>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" width="400" />

    <!-- <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          Remove
        </el-button>
      </template>
    </el-table-column> -->

  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="removeSelect()" style="background: red, font-color: red">删除</el-button>
    <el-button @click="undoSelect()">取消</el-button>
  </div>

</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'

let base_url = "http://10.82.14.162:8000/voiceprint/"
const tableData = ref([])
const voice_blank = { url: '', user: '', audio: '', content: '', voiceprint: '', }
const multipleTableRef = ref()
const multipleSelection = ref([])

const removeSelect = () => {
  if (multipleSelection.value) {
    multipleSelection.value.forEach((row) => {
      console.log('row:', row)
      deleteRow(row)
    });
    getVoiceList()
  }
}

const undoSelect = () => {
  multipleTableRef.value.clearSelection()
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log('value:', multipleSelection.value[0])
}

const getVoiceList = () => {
  axios.get(base_url).then(res => {
    tableData.value = res.data
  }).catch(err => {
    console.log(err);
  })
}

const deleteRow = (item) => {
  axios.delete(item.url).then(() => {
    getVoiceList();
  }).catch(err => {
    console.log(err);
  })
}

onMounted(() => {
  getVoiceList();
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
article {
  div.facedb {
    width: 100%;
    height: 100%;
    overflow: auto;

    ul {
      list-style-type: none;

      li {
        width: 120px;
        height: 120px;
        float: left;
        // border: solid 1px red;

        img {
          width: 100px;
          height: 100px;
          aspect-ratio: true;
        }

      }
    }
  }
}
</style>
